<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-row :gutter="15">
          <el-col :span="2">
            <span>物品清单</span>
          </el-col>
          <el-col :span="4">
              <el-radio-group v-model="printRadio" size="mini" @change="radioChange">
                  <el-radio-button :label="0" border>全部</el-radio-button>
                  <el-radio-button :label="1" border>待打印</el-radio-button>
                  <el-radio-button :label="2" border>已打印</el-radio-button>
                </el-radio-group>
          </el-col>
          <el-col :span="4">
             <el-input placeholder="请输入物品编号" suffix-icon="el-icon-search" v-model="searchVal" @input="searchChange" size="small" clearable @clear="searchClear">
               <!-- <el-button  slot="append" icon="el-icon-search" circle @click="searchChange"></el-button> -->
             </el-input>
          </el-col>
          <el-col :span="14">
            <el-button class="fr" style="padding: 3px 0" type="text" @click="pack">装箱</el-button>
          </el-col>
        </el-row>
      </div>
      <template v-for="item in dataList">
        <!-- <el-card class="fl mr10 mb10">
          <el-descriptions :column="3" border>
             <el-descriptions-item label="物品编号" :span="3">
                <el-checkbox slot="label"  :checked="item.isChecked" @change="checkBoxChange($event,item)"></el-checkbox>
                {{item.pno}}
                <qrcode-show ref="qrcodeShow" :datas.sync="item"></qrcode-show>
             </el-descriptions-item>
             <el-descriptions-item label="名称" :span="2">{{item.name}}</el-descriptions-item>
             <el-descriptions-item label="数量">{{item.nums}}</el-descriptions-item>
             <el-descriptions-item label="仓库" :span="3">{{item.storeName}}</el-descriptions-item>
             <el-descriptions-item label="图片" :span="3">
               <el-image v-if="item.soss && item.soss.length > 0" v-for="(pic,pindex) in item.soss"
               style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
               :preview-src-list="ossTransfer(item.soss,'list')"></el-image>
             </el-descriptions-item>
             <el-descriptions-item label="存放位置" :span="3">
               <locator-select :datas.sync="item" :storeId="storeId" :areaId="areaId" @updatePutDtl="updatePutDtl"></locator-select>
             </el-descriptions-item>
             <el-descriptions-item label="上架密码" :span="3" v-if="item.isPwd">
                <el-input show-password placeholder="请设置上架密码" v-model="item.putPassword"/>
             </el-descriptions-item>
             <el-descriptions-item label="入库编号" :span="3">{{item.qrcode}}</el-descriptions-item>
             <el-descriptions-item label="打印状态" :span="3">
             <el-tag type="success" v-if="item.printFlag && item.printFlag > 0">已打印</el-tag>
             <el-tag type="info" v-else>未打印</el-tag>
             </el-descriptions-item>
          </el-descriptions>
        </el-card> -->
          <template v-if="item.boxNo && !item.hid">
            <el-card class="fl mr10 mb10" style="width: 45%" shadow="hover">
              <el-descriptions :column="3" border class="mb5">
                 <el-descriptions-item label="箱号" :span="2">{{item.boxNo}}</el-descriptions-item>
                 <el-descriptions-item label="物品数">
                    <i>{{item.nums}}</i>
                    <el-tooltip content="拆箱" placement="top" effect="light" class="mr10 ml10">
                      <el-popover
                        placement="top"
                        width="160"
                        v-model="item.isRemove">
                        <p>是否拆箱？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="item.isRemove = false">取消</el-button>
                          <el-button type="primary" size="mini" @click="unpacking(item.boxId,item)">确定</el-button>
                        </div>
                        <el-button slot="reference" type="text" style="color: red;" icon="el-icon-box" ></el-button>
                      </el-popover>
                    </el-tooltip>
                 </el-descriptions-item>
                 <el-descriptions-item label="仓库" :span="3">{{item.storeName}}</el-descriptions-item>
                 <el-descriptions-item label="存放位置" :span="3">
                   <locator-select :datas.sync="item" :storeId="storeId" :areaId="areaId"  @updatePutDtl="updatePutBoxDtl"></locator-select>
                 </el-descriptions-item>

                 <el-descriptions-item label="上架密码" :span="3" v-if="item.isPwd">
                    <el-input show-password placeholder="请设置上架密码" v-model="item.putPassword"/>
                 </el-descriptions-item>
                  </el-descriptions>
                 <template v-for="(child,ind) in item.items">
                   <template v-if="!child.hid">
                     <el-card class="mb5" shadow="hover">
                       <el-descriptions :column="3" border>
                     <el-descriptions-item label="编号" :span="3">{{child.pno}}
                     <qrcode-show ref="qrcodeShow" :datas.sync="child"></qrcode-show>
                     </el-descriptions-item>
                     <el-descriptions-item label="名称" :span="2">{{child.name}}</el-descriptions-item>
                     <el-descriptions-item label="数量" :span="1">{{child.nums}}</el-descriptions-item>
                     <el-descriptions-item label="入库编号" :span="3">{{child.qrcode}}</el-descriptions-item>
                     <el-descriptions-item label="图片" :span="3">
                       <el-image v-if="child.soss && child.soss.length > 0" v-for="(pic,pindex) in child.soss"
                       style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                       :preview-src-list="ossTransfer(child.soss,'list')"></el-image>
                     </el-descriptions-item>
                     <el-descriptions-item label="打印状态" :span="3">
                     <el-tag type="success" v-if="child.printFlag && child.printFlag > 0">已打印</el-tag>
                     <el-tag type="info" v-else>未打印</el-tag>
                     </el-descriptions-item>
                     </el-descriptions>
                     </el-card>
                   </template>
                 </template>
            </el-card>
          </template>
          <template v-if="!item.boxNo && !item.hid">
            <el-card class="fl mr10 mb10" shadow="hover">
              <el-checkbox-group v-model="selection">
                  <el-descriptions :column="3" border>
                     <el-descriptions-item label="编号" :span="3">
                        <el-checkbox slot="label" :label="item.pno"><br></el-checkbox>
                        {{item.pno}}
                        <qrcode-show ref="qrcodeShow" :datas.sync="item"></qrcode-show>
                     </el-descriptions-item>
                     <el-descriptions-item label="名称" :span="2">{{item.name}}</el-descriptions-item>
                     <el-descriptions-item label="数量">{{item.nums}}</el-descriptions-item>
                     <el-descriptions-item label="仓库" :span="3">{{item.storeName}}</el-descriptions-item>
                     <el-descriptions-item label="入库编号" :span="3">{{item.qrcode}}</el-descriptions-item>
                     <el-descriptions-item label="车辆类型" :span="3" v-if="isShowCar">
                       <el-select v-model="item.carType" placeholder="车辆类型"  size="small">
                         <el-option
                           v-for="dict in dict.type.put_task_car_type"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
                         />
                       </el-select>
                     </el-descriptions-item>
                     <el-descriptions-item label="存放位置" :span="3">
                       <locator-select :datas.sync="item" :storeId="storeId" :areaId="areaId" @updatePutDtl="updatePutDtl"></locator-select>
                     </el-descriptions-item>
                     <el-descriptions-item label="图片" :span="3">
                       <el-image v-if="item.soss && item.soss.length > 0" v-for="(pic,pindex) in item.soss"
                       style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                       :preview-src-list="ossTransfer(item.soss,'list')"></el-image>
                     </el-descriptions-item>
                     <el-descriptions-item label="上架密码" :span="3" v-if="item.isPwd">
                        <el-input show-password placeholder="请设置上架密码" v-model="item.putPassword"/>
                     </el-descriptions-item>

                     <el-descriptions-item label="打印状态" :span="3">
                     <el-tag type="success" v-if="item.printFlag && item.printFlag > 0">已打印</el-tag>
                     <el-tag type="info" v-else>未打印</el-tag>
                     </el-descriptions-item>
                  </el-descriptions>
              </el-checkbox-group>
            </el-card>
          </template>
      </template>

    </el-card>
  </div>
</template>

<script>
  import {delUnpacking} from '@/api/wms/putTask';
  import {updatePutDtl,updatePutBox,editPutDtl} from '@/api/wms/putDtl'
  export default {
    dicts: ['put_task_car_type'],
    props:{
      value:{
        type:[Array,Object,String]
      },
      putTaskId:{
        type:[String]
      },
      storeId:{
        type:[String]
      },
      areaId:{
        type:[String]
      },
      isCar:{
        type:[Boolean],
        default:false
      }
    },
    data(){
      return{
        dataList:[],
        searchVal:undefined,
        selection:[],

        printRadio:0,
        isShowCar:false
      }
    },
    watch:{
      value:{
        handler(newVal){
          if(newVal){
            // console.info('newVal===================>',newVal)
            this.dataList = newVal;
          }
        }
      },
      isCar:{
        handler(newVal){
          if(newVal){
            // console.info('newVal===================>',newVal)
            this.isShowCar = newVal;
          }
        }
      },
      storeId:{
        handler(newVal){
          if(newVal){
            // console.info('storeId======>',newVal)
          }
        }
      },
      areaId:{
        handler(newVal){
          if(newVal){
            // console.info('areaId======>',newVal)
          }
        }
      },
      selection:{
        handler(newVal){
          if(newVal){
            console.info('selection======>',newVal)
          }
        }
      }
    },
    methods:{
      //拆箱
      unpacking(boxId,item){
        if(this.putTaskId){
          if(boxId){
            delUnpacking(boxId,this.putTaskId).then(response=>{
              this.$emit('input',this.dtl2Box(response.data,item=>item.boxId))
              item.isRemove = false;
            });
          }else{
            let result = this.boxNo2Dtl(this.dataList);
            let datas = result[0];
            datas.forEach(item=>{
              item.boxNo = null;
            })
            this.$emit('input',this.dtl2BoxNo(datas,item=>item.boxId))
          }
        }else{
          let result = this.boxNo2Dtl(this.dataList);
          let datas = result[0];
          datas.forEach(item=>{
            item.boxNo = null;
            item.boxId = null;
          })
          this.$emit('input',this.dtl2BoxNo(datas,item=>item.boxId))
        }

      },
      checkBoxChange(flag,item){
        if(flag){
          this.selection.push(item.pno)
        }else{
          this.selection.forEach((data,index)=>{
            if(data == item.pno){
              this.selection.splice(index,1)
            }
          })
        }
      },
      searchChange(e){
        this.printRadio = 0;
        console.info('dataList====>',this.dataList)
        this.dataList.forEach(item=>{
          if(item.boxNo){
            let items = item.items;
            let ind = 0;
            items.filter(child=>{
              if(child.pno.indexOf(this.searchVal) == -1){
              	child.hid = true;
              }else{
              	child.hid = false;
                ind++;
              }
            })
            if(ind == 0){
              item.hid = true;
            }else{
              item.hid = false;
            }

          }else{
            if(item.pno.indexOf(this.searchVal) == -1){
            	item.hid = true;
            }else{
            	item.hid = false;
            }
          }
          console.info('this.dataList.===>',this.dataList)
        })
      },
      searchClear(){
        console.info('清除')
        this.dataList.forEach(item=>{
          if(item.boxNo){
            let items = item.items;
            items.filter(child=>{
              child.hid = false;
            })
            item.hid = false;
          }else{
            item.hid = false;
          }
        })
      },
      radioChange(index){
         if(index == 0){
           this.searchClear();
         }
         if(index == 1){
           console.info('index===>',index)
           this.dataList.forEach(item=>{
             if(item.boxNo){
               let items = item.items;
               let ind = 0;
               items.filter(child=>{
                 console.info('printFlag=====>',child.printFlag)
                 if(child.printFlag == 0){
                 	child.hid = false;
                  ind++;
                 }else{
                 	child.hid = true;
                 }
               })
               if(ind == 0){
                 item.hid = true;
               }else{
                 item.hid = false;
               }

             }else{
               if(item.printFlag == 0){
               	item.hid = false;
               }else{
               	item.hid = true;
               }
             }
           })
         }
         if(index == 2){
           this.dataList.forEach(item=>{
             if(item.boxNo){
               let items = item.items;
               let ind = 0;
               items.filter(child=>{
                 if(child.printFlag > 0){
                 	child.hid = false;
                  ind++;
                 }else{
                 	child.hid = true;
                 }
               })
               if(ind == 0){
                 item.hid = true;
               }else{
                 item.hid = false;
               }

             }else{
               if(item.printFlag > 0){
               	item.hid = false;
               }else{
               	item.hid = true;
               }
             }
           })
         }
      },
      //打包
      pack(){
         if(this.selection.length == 0){
            this.$message('请至少选择一条物品信息！');
            return false;
         }
         this.$prompt('请输入存放的物证保管箱号。如果不知道箱号，输入自定义箱号，手机上架时，扫物证箱号二维码可进行更新箱号。','装箱',{
           confirmButtonText:'确认',
           cancelButtonText:'取消'
         }).then(response=>{
           let boxNo = response.value;
           let result = this.box2Dtl(this.dataList);
           let datas = result[0];
           datas.forEach(item=>{
             if(this.selection.includes(item.pno)){
               item.boxNo = boxNo;
             }
           })
           let resultArrs = this.dtl2BoxNo(datas,item=>item.boxNo);
           console.info("result===>",resultArrs)
           this.$emit('input',resultArrs)
           this.selection = [];
         })
      },
      updatePutDtl(item){
        editPutDtl(item).then(response=>{
          let result = response.data;
           console.info("result::",result);
            item.qrcode = result.qrcode;
            item.areaName = result.areaName;
            item.groupName = result.groupName;
            item.cabinetName = result.cabinetName;
            item.locatorName = result.locatorName;
            item.storeName = result.storeName;
        });
      },
      updatePutBoxDtl(item){
        updatePutBox(item).then(response=>{
          let result = response.data;
           console.info("result::",result);
            item.items = result.items;
        });
      },
    }
  }
</script>

<style>
</style>
